<template>
    <m-page-water-fall :listFn="listFn" ref="mPageWaterFall" @querySucess="(datas:any[])=>emit('querySucess',datas)">
        <template v-slot:header="{ data: product }">
            <image class="m-product-img" :src="product.imageUrl" mode="scaleToFill" />
        </template>
        <template v-slot:body="{ data: product }">
            <view class="m-product-content-title">{{ product.title }}</view>
            <view class="m-product-content-sub-title">{{ product.subTitle }}</view>
            <view class="m-product-content-tags">
                <uni-tag
                    v-for="item in product.tags"
                    :inverted="true"
                    :text="item"
                    type="success"
                    size="small"
                    custom-style=" margin: 8rpx 4rpx;
    word-break: keep-all;"
                />
            </view>
        </template>
        <template v-slot:footer="{ data: product }">
            <view class="m-product-content-price">{{ product.price }}</view>
        </template>
    </m-page-water-fall>
</template>

<script lang="ts" setup>
import MPageWaterFall from '@/components/common/MPageWaterFall.vue'
import { ref } from 'vue'
const props = defineProps({
    listFn: { type: Function, required: true }
})
const mPageWaterFall = ref<InstanceType<typeof MPageWaterFall> | null>(null)
function reset() {
    mPageWaterFall.value?.reset()
}
const emit = defineEmits<{
    (e: 'querySucess', datas: any[]): void
}>()
defineExpose({
    reset
})
</script>

<style lang="scss" scoped>
@import '~@/static/css/m-product.scss';
</style>
